<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生评分</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
<div style="padding: 20px;">
    <table class="layui-hide" id="studentGradeTable" lay-filter="studentGradeTable"></table>
</div>

<script type="text/html" id="gradeBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="grade">评分</a>
</script>

<script>
    layui.use(['table', 'layer', 'form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        var teacherId = getQueryVariable('teacherId');

        table.render({
            elem: '#studentGradeTable',
            url: '/api/teacher/' + teacherId + '/students',
            cols: [[
                {field: 'studentId', title: '学生ID'},
                // In a real app, you'd join tables to get student name and course name
                {field: 'courseId', title: '课程ID'},
                {field: 'regularScore', title: '平时成绩'},
                {field: 'labScore', title: '实验成绩'},
                {field: 'examScore', title: '考试成绩'},
                {field: 'finalScore', title: '最终成绩'},
                {title: '操作', toolbar: '#gradeBar'}
            ]]
        });

        // 监听行工具事件
        table.on('tool(studentGradeTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'grade'){
                var content = `
                    <div style="padding: 20px;">
                        <form class="layui-form" lay-filter="gradeForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">平时分</label>
                                <div class="layui-input-block">
                                    <input type="text" name="regularScore" value="${data.regularScore || ''}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">实验分</label>
                                <div class="layui-input-block">
                                    <input type="text" name="labScore" value="${data.labScore || ''}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">考试分</label>
                                <div class="layui-input-block">
                                    <input type="text" name="examScore" value="${data.examScore || ''}" class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>`;

                layer.open({
                    type: 1,
                    title: '为学生 ' + data.studentId + ' 评分',
                    content: content,
                    area: ['500px', '400px'],
                    btn: ['保存', '取消'],
                    success: function(layero, index){
                        form.render();
                    },
                    yes: function(index, layero){
                        var gradeData = form.val('gradeForm');
                        $.ajax({
                            url: '/api/student-course/' + data.id + '/grade',
                            type: 'PUT',
                            contentType: 'application/json',
                            data: JSON.stringify(gradeData),
                            success: function() {
                                layer.msg('评分成功', {icon: 1});
                                layer.close(index);
                                table.reload('studentGradeTable');
                            },
                            error: function() {
                                layer.msg('评分失败', {icon: 2});
                            }
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>
